<template>
    <div class="fruits-root">
        <div class="fruits-img">
        </div>
        <div class="fruits-bottom">
            <p>水果</p>
            <Stars :value="4"></Stars>
        </div>
      

    </div>
</template>

<script>
import Stars from "./Stars.vue";
export default {
  components: {
    Stars
  }
};
</script>

<style scoped>
.fruits-root {
    box-shadow: 0 0 1vw 0.2vw lightgray;
  width: 28vw;
  height: 28vw;
  border-radius: 2vw;
  overflow: hidden;
  position: relative;
  margin: 2vw 0;
}
.fruits-img {
  width: 28vw;
  height: 28vw;
  background-size: 100% 100%;
  background-image: url("/img/main-img/资源24.png");
  position: absolute;
  top: -5vw;
}
.fruits-bottom{
    width: 100%;
    position: absolute;
    bottom: 3vw;    
    text-align: center;
}
.fruits-bottom p{
    font-size: 4.5vw;
    margin-bottom: 1vw;
    color: rgb(102, 102, 102);
}
</style>